<template>
    <div class="userInfoWrap" v-show="!lodding">
      <img class="userPhoto" v-bind:src="user.photo"></img>
      <div class="userInfo">
        <div><strong>姓名:  </strong>{{user.name}}</div>
        <div><strong>性别:  </strong>{{formatSex}}</div>
        <div><strong>年龄:  </strong>{{user.age}}</div>
        <button v-on:click="update">修改</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      lodding: true,
      user: {
        name: '',
        sex: 0,
        age: 0,
        photo: ''
      }
    }
  },
  created() {
    this.lodding = true;

    this.$post(this.$Api.API_USER_INFO).then(res => {
      this.user = res.data;
      this.lodding = false;
    }, err => {
      alert(err);
    })

  },
  computed: {
    formatSex() {
      return this.user.sex === 1 ? '男士' : '女士'
    }
  },
  methods: {
    update() {
      this.$router.push('userEdit');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.userPhoto {
  width: 220px;
  height: 220px;
  border: solid 1px blueviolet;
  float: left;
}
.userInfo{
  float: left;
  width: 220px;
  height: 220px;
  border: solid 1px blueviolet;
}

button {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  float:right;
}

div{
  text-align: left
}

.userInfoWrap{
  border: solid 2px black;
  width: 440px;
  height: 440px;
}
</style>
